@charset "utf-8";
/*CSS Document*/
*{
	margin: 0;
	padding: 0;
}

figure{
	position: relative;
	width: 33.33%;
	overflow: hidden;
	height: 350px;
	float: left;
}
figure img{
	opacity: 0.8;
	transition: all 0.35s;
}
figure figcaption p,h2,span,div,i,h3{/*figcaption不要去掉，不然页面所有p、h2、span……都这样*/
	transition: all 0.35s;
}

figcaption{
	position: absolute;
	top:0;
	left:0;
	color: #fff;
	font-family: "微软雅黑";
}
@media screen and (max-width: 600px){
	figure{width:100%}
}
@media screen and (min-width: 601px) and (max-width: 1000px){
	figure{width:50%}
}
@media screen and (min-width: 1001px){
	figure{width:33.33%}
}


/*test1*/
.test1{
	background: #2f0000;/*遮罩一层红色的背景，因为图片有0.8透明度，能看到一点这个红色背景*/
}
.test1 figcaption{
	padding: 20px;
}
.test1 figcaption p{
	background: #fff;
	color: #333;
	margin: 4px;
	text-align: center;
	transform: translate(-120px,0px);
}
.test1 figcaption p:nth-of-type(1){/*同级相同元素索引*/
	transition-delay:0.05s; 
}
.test1 figcaption p:nth-of-type(2){/*同级相同元素索引*/
	transition-delay:0.1s; 
}
.test1 figcaption p:nth-of-type(3){/*同级相同元素索引*/
	transition-delay:0.15s; 
}
.test1:hover figcaption p{
	transform: translate(0px,0px);
}
.test1:hover img{
	transform: translate(-50px,0px);
	opacity: 0.5;
}

/*test2*/
.test2{
	background: rgb(58,97,108);/*遮罩一层蓝色的背景，因为图片有0.8透明度，能看到一点这个蓝色背景*/
}
.test2 figcaption{
	width: 100%;/*没有这个，下面的div的width: 80%;height: 80%;不知道继承谁*/
	height: 100%;
}
.test2 figcaption h2{
	margin: 15% 15% 0 15%;
	transform: translate(0px,-50px);
	opacity: 0;
}
.test2 figcaption p{
	margin:8% 15% 15% 15%;
	transform: translate(0px,50px);
	opacity: 0;
}
.test2 figcaption div{
	border: 2px solid #fff;
	width: 80%;
	height: 80%;
	position: absolute;
	top: 10%;
	left: 10%;
	transform: translate(0px,-350px) rotate(0deg);
}
.test2:hover figcaption div{
	transform: translate(0px,0px) rotate(180deg);
}
.test2:hover img{
	opacity: 0.5;
}
.test2:hover figcaption h2{
	transform: translate(0px,0px);
	opacity: 1;
}
.test2:hover figcaption p{
	transform: translate(0px,0px);
	opacity: 1;
}


/*test3*/
.test3{
	background: #000;
}
.test3 figcaption{
	top:30%;
	left:15%;
}
.test3 figcaption h2{
	transform: skew(90deg);
}
.test3 figcaption p{
	transform: skew(90deg);
	transition-delay:0.1s; 
}
.test3:hover img{
	opacity: 0.5;
}
.test3:hover figcaption h2{
	transform: skew(0deg);
}
.test3:hover figcaption p{
	transform: skew(0deg);
}


/*test4*/
.test4{
	background: #000;
}
.test4 figcaption{
	width: 100%;
	height: 100%;
}
.test4 figcaption h2{
	transform: scale(1.2,1.2);
	margin: 15% 15% 0 15%;
	opacity: 0;
}
.test4 figcaption p{
	transform: scale(1.2,1.2);
	margin:8% 15% 15% 15%;
	opacity: 0;
}
.test4 figcaption div{
	border: 2px solid #fff;
	width: 80%;
	height: 80%;
	position: absolute;
	top: 10%;
	left: 10%;
	transform: scale(1.2,1.2);
	opacity: 0;
}
.test4:hover figcaption div{
	transform: scale(1,1);
	opacity: 1;
}
.test4:hover img{
	opacity: 0.5;
	transform: scale(1.2,1.2);
}
.test4:hover figcaption h2{
	transform: scale(1,1);
	opacity: 1;
}
.test4:hover figcaption p{
	transform: scale(1,1);
	opacity: 1;
}


/*test5*/
.test5{
	background: rgb(58,97,108);
}
.test5 figcaption{
	width: 100%;/*没有这个，下面的div的width: 80%;height: 80%;不知道继承谁*/
	height: 100%;
}
.test5 figcaption h2{
	margin: 15% 15% 0 15%;
	transform: translate(0px,-50px);
	opacity: 0;
}
.test5 figcaption p{
	margin:8% 15% 15% 15%;
	transform: translate(0px,50px);
	opacity: 0;
}
.test5 figcaption span{
	color: #111;
	font-size:28px;
	right: 0;
	bottom: 0;
	margin-bottom: 5%;
	margin-right: 8%;
	position: absolute;
	transform: translate(0px,100px);
	opacity: 0;
	z-index: 1;
}
.test5 figcaption i{
	color: #111;
	font-size:30px;
	line-height: 26px;
	right: 0;
	bottom: 0;
	margin-bottom: 5%;
	margin-right: 20%;
	position: absolute;
	transform: translate(0px,100px);
	opacity: 0;
	z-index: 1;
}
.test5 figcaption div{
	width: 140%;
	height:50%;
	position: absolute;
	background: rgba(206,213,217,0.65);
	left:0%;
	bottom: -50%;
	transform:rotate(0deg);
	z-index: 0;
}
.test5:hover figcaption div{
	transform-origin: 0px 0px;
	transform: rotate(-18deg);
}
.test5:hover figcaption span{
	transform: translate(0px,0px);
	opacity: 1;
}
.test5:hover figcaption i{
	transform: translate(0px,0px);
	opacity: 1;
}
.test5:hover img{
	opacity: 0.5;
}
.test5:hover figcaption h2{
	transform: translate(0px,0px);
	opacity: 1;
}
.test5:hover figcaption p{
	transform: translate(0px,0px);
	opacity: 1;
}


/*test6*/
.test6{
	background: #000;
}
.test6 figcaption p,h2,span,div,i,h3{/*figcaption不要去掉，不然页面所有p、h2、span……都这样*/
	transition: all 0.4s;
}
.test6 figcaption{
	width: 100%;
	height: 100%;
}
.test6 figcaption h2{
	transform: scale(1.2,1.2);
	margin: 22% 15% 0 22%;
	opacity: 0;
}
.test6 figcaption p{
	transform: scale(1.2,1.2);
	margin:8% 15% 15% 22%;
	opacity: 0;
}
.test6 figcaption div{
	width: 80%;
	height: 65%;
	position: absolute;
	top: 17%;
	left: 9%;
	transform: scale(1.2,1.2);
	opacity: 0;
}
.test6 figcaption div:nth-of-type(1){/*同级相同元素索引*/
	border-top: 1px solid #fff;
	transition-delay:0.05s; 
}
.test6 figcaption div:nth-of-type(2){/*同级相同元素索引*/
	border-bottom: 1px solid #fff;
	transition-delay:0.15s; 
}
.test6 figcaption h3{
	width: 65%;
	height: 77%;
	position: absolute;
	top: 12%;
	left: 17%;
	transform: scale(1.2,1.2);
	opacity: 0;
}
.test6 figcaption h3:nth-of-type(1){
	border-left: 1px solid #fff;
	transition-delay:0.2s; 
}
.test6 figcaption h3:nth-of-type(2){/*同级相同元素索引*/
	border-right: 1px solid #fff;
	transition-delay:0.1s; 
}
.test6:hover figcaption div{
	transform: scale(1,1);
	opacity: 1;
}
.test6:hover figcaption h3{
	transform: scale(1,1);
	opacity: 1;
}
.test6:hover img{
	opacity: 0.5;
	transform: scale(1.2,1.2);
}
.test6:hover figcaption h2{
	transform: scale(1,1);
	opacity: 1;
}
.test6:hover figcaption p{
	transform: scale(1,1);
	opacity: 1;
}